/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    FlatList,
    SwipeableFlatList,
    RefreshControl,
    ActivityIndicator,
    TouchableHighlight,
    SectionList,
} from 'react-native';

type Props = {};
const CITY_NAME = [
    {data: ['北京1', '北京2', '北京3', '北京4'], title: '1线'},
    {data: ['北京1', '北京2', '北京3', '北京4'], title: '2线'},
    {data: ['北京1', '北京2', '北京3', '北京4'], title: '3线'},
    {data: ['北京1', '北京2', '北京3', '北京4'], title: '4线'}];

export default class SectionListDemoT extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            dataArray: CITY_NAME,
        }
    }

    _renderItem(data) {
        return <View style={styles.item}>
            <Text style={styles.refresh_txt}>{data.item}</Text>

        </View>
    }

    _refreshItem() {
        this.setState({
            isLoading: true
        })

        let dataArray = [];
        for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
            dataArray.push('卧槽' + i);
        }
        this.setState({
            isLoading: false,
            dataArray: dataArray,
        })
        setTimeout(() => {
        }, 2000);
    }

    _loadMoreItem() {
        setTimeout(() => {
            let dataArray = [];
            for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
                dataArray.push('卧槽' + i);
            }
            dataArray = this.state.dataArray.concat(CITY_NAME)

            this.setState({
                isLoading: false,
                dataArray: dataArray,
            })
        }, 2000);
    }

    _getIndicator() {

        return <View>
            <ActivityIndicator
                size={'large'}
                animating={true}
            />

            <Text style={styles.more_txt}>正在加载更多</Text>
        </View>
    }

    _getQuickActions() {

        return <View style={styles.quick_container}>
            <TouchableHighlight>
                <View style={styles.quick_view}>
                    <Text>
                        删除
                    </Text>
                </View>
            </TouchableHighlight>
        </View>
    }

    _renderSectionHeader({section}) {
        return <View>
            <Text>
                {section.title}
            </Text>
        </View>

    }

    render() {
        return (
            <View style={styles.container}>
                <SectionList sections={this.state.dataArray}
                             renderItem={(data) => this._renderItem(data)}

                    // refreshing={this.state.isLoading}
                    // onRefresh={() => {
                    //     this._refreshItem()
                    // }}
                    //自定以下拉刷新加载动画
                             refreshControl={
                                 <RefreshControl
                                     title={'加载中...'}
                                     colors={['red']}
                                     refreshing={this.state.isLoading}
                                     onRefresh={() => {
                                         this._refreshItem()
                                     }}
                                 />
                             }
                             ListFooterComponent={() => this._getIndicator()}
                             onEndReached={() => {
                                 this._loadMoreItem()
                             }}

                             renderQuickActions={() =>
                                 this._getQuickActions()
                             }

                             renderSectionHeader={(data) => this._renderSectionHeader(data)}

                />


            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        backgroundColor: '#ffaaaa',
        height: 100,
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 15,
        marginBottom: 15,

    },
    refresh_txt: {
        fontSize: 16
    },
    more_txt: {
        fontSize: 16,
        alignSelf: 'center',
        justifyContent: 'center',
    },
    quick_container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    quick_view: {
        backgroundColor: '#ccaadd',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-end'
    },
});